<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<style>
    *{

    }
    .header-nav{
        height: 80px;
        min-width: 1200px;
        background-color: rgb(32, 30, 30);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    
    .header-left{
        height: 100%;
        width: 120px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center
    }
    .header-right{
        height: 100%;
        width: 300px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center

    }
    .text-logo{
        color: white;
        font-size: 30px;
    }
    .header-font{
        color: white;
        font-size: x-small;
    }
    .header-background {
        height: 650px;
        min-width: 1200px;
        background-image: url("image/1.jpg");
        background-size: cover; /* 新增：让背景图填满容器，避免空白 */
        background-position: center; /* 新增：背景图自身居中 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; /* 子元素水平居中 */
        text-align: center; /* 新增：让容器内文字默认居中 */
    }
    .main-content {
        min-width: 1200px;
        margin: 0 auto; /* 居中显示 */
        background-size: cover; /* 或 contain，确保图片可见 */
        min-height: 1970px; /* 必须设置高度，否则容器为0 */
        background-image: url("image/2.png");
        display: flex;
        flex-direction: column;
        align-items: center;
}

    /* 取消固定宽度，改用 max-width 限制最大宽度，内容自适应 */
    .header-box1 {
    /* 去掉 height: 70px; width: 760px; */
    max-width: 760px; /* 最大宽度限制 */
    margin-bottom: 10px; /* 与下方元素留间距 */
    }

    .header-box2 {
    /* 去掉 height: 30px; width: 360px; */
    max-width: 360px;
    }

    .header-box3 {
    width: 150px; /* 按钮宽度固定 */
    display: flex;
    justify-content: center; /* 按钮内文字水平居中 */
    align-items: center; /* 按钮内文字垂直居中 */
    margin-top: 50px;
    }

    .header-box3 > div {
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直居中文字 */
    }
    
    .main-topbox{
        height: 280px;
        width: 1200px;
        display: flex;
        flex-direction: column;

    }
    /* 其他 CSS 保持不变，只修改这部分 */
    .main-toptext{
        /* 删掉 height: 50px; 让容器高度自适应子元素 */
        width: 1400px;
        display: flex;
        flex-direction: row;
        margin-top:40px;
        justify-content: space-evenly;
        /* 可选：加 margin-bottom 让按钮与文本保持距离 */
        margin-bottom: 180px;
    }
    .main-toptext-items{
        height: 150px;
        width: 220px;
    }
    .main-box1{
        height: 400px;
        display: flex;
        flex-direction: row;
        margin-bottom: 200px;
        justify-content: center;
    }
    .main-box2{
        height: 380px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .main-leftbox{
        height: 400px;
        width: 530px;
        display: flex;
        flex-direction: column;
        margin-left: 80px;
    }
    .main-rightbox{
        height: auto; 
        width: 750px;
        background-image: url(image/电脑.png);
        background-size: cover; /* 背景图覆盖容器 */
        background-position: center; /* 背景图居中 */
        position: relative; /* 作为子元素（屏幕）的定位参考 */
    }
    /* 删去前后空白行 */
    .no-margin {
        margin-top: 0;
        margin-bottom: 0;
    }
     
    /* 屏幕区域：定位到电脑屏幕的位置 + 显示第二张图 */
    .screen {
        position: absolute;
        top: 30px;
        bottom: 0px;
        left: 114px;
        width: 515px;
        height: 321px;
        background-image: url(image/电脑图片.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .screen2 {
        position: absolute;
        top: 44px;
        bottom: 0px;
        left: 194px;
        width: 403px;
        height: 275px;
        background-image: url(image/相机图片.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .main-rightbox2 {
        height: 365px;
        width: 740px;
        background-image: url(image/相机.png);
        background-size: contain;
        background-position: center;
        position: relative;
        background-repeat: no-repeat;
    }
    .black-background{
        height: 240px;
        width: 100%;
        background-color: black;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .little-background {
        height: 240px;
        width: 276px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        background-size: contain;
        background-repeat: no-repeat;
        text-align: center;
        color: white;
        font-size: 14px;
        flex-direction: column;
    }
    .team-container {
        display: flex;
        flex-direction: row;
        justify-content: center; /* 水平居中排列卡片 */
        flex-wrap: wrap; /* 当屏幕变窄时，卡片自动换行 */
        gap: 20px; /* 卡片之间的间距 */
        padding: 20px;
    }
    /* 团队成员卡片 */
    .team-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center; /* 卡片内文字水平居中 */
        width: 200px; /* 卡片宽度，可根据需求调整 */
    }
    /* 成员头像：设置为圆形 */
    .team-card img {
        width: 150px;
        height: 150px;
        border-radius: 50%; /* 圆形效果 */
        object-fit: cover; /* 保持图片比例，填充容器 */
    }

    /* 团队标题和描述样式 */
    .team-header {
        text-align: center; /* 文字水平居中 */
        margin-top: 80px;
        margin-bottom: 30px;
    }
    .team-header h2 {
        font-size: 48px;
        margin-bottom: 10px;
    }
    .team-header p {
        font-size: 16px;
        color: #666;
    }
    .product-container {
        height: 650px;
        width: 100%;
        background-color: #6666669e;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; /* 子元素水平居中 */
        text-align: center; /* 新增：让容器内文字默认居中 */
        color: white;
    }
    .contact-section {
        height: 720px;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 20px;
        background-image: url(image/7.jpg);
        justify-content: center;      
        align-items: center
    }
    .contact-leftsection{
        width: 600px;
        display: flex;
        flex-direction: column;
        color: white;
        margin-bottom: 240px;

    }
    .contact-leftsection span{
        
        color: rgba(255, 255, 255, 0.5);
        font-size: 30px;
    }
    .contact-rightsection{
        margin-top: 100px;
        width: 600px;
        display: flex;
        flex-direction: column;
    }

    .form-group {
        margin-bottom: 20px; /* 输入框之间的间距 */
    }
    .clear-input {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        background-color: transparent; /* 背景完全透明，不遮挡背景图 */
        border: 1px solid rgba(255, 255, 255, 0.3); /* 半透明白色边框 */
        color: #fff; /* 文字为白色，确保可读 */
        border-radius: 4px;
        outline: none;
    }
    .footer-content{
        height: 100px;
        width: 100%;
        display: flex;
        flex-direction: row;
        background-color: black;
        gap: 40px;
        justify-content: center

    }
    .contact-item {
        display: flex; /* 让图标和文字水平排列 */
        align-items: center; /* 垂直居中对齐 */
        margin-bottom: 10px; /* 每个联系方式项的底部间距 */
    }

        .contact-item i {
        color: #333; /* 图标颜色，可根据需求修改 */
        margin-right: 8px; /* 图标与文字的间距 */
        font-size: 16px; /* 图标大小 */
    }

        .contact-item span {
        font-size: 14px;
        color: #555;
    }

    
</style>
<body>
    <div class="header-nav">
        <div class="header-left">
            <span class="text-logo">Austera</span>
            <span style="color: rgb(38, 115, 204);font-size: 35px;">°</span>
        </div>
        <div class="header-right">
            <span style="color: white;font-size: 13px">首页</span>
            <span style="color: white;font-size: 13px">服务</span>
            <span style="color: white;font-size: 13px">团队</span>
            <span style="color: white;font-size: 13px">联系我们</span>
        </div>
    </div>
    <div class="header-background">
        <div class="header-box1">
            <span style="color: rgb(42, 63, 222);font-size: 40px;">Austera</span>
            <span style="color: white;font-size: 40px;">将会成为你一小步的一大步</span>
        </div>
        <div class="header-box2">
            <span style="color: rgb(108, 114, 114);font-size: 15px;">拥有丰富权威的设计资源,智能为你解决企业方案</span>
        </div>
        <div class="header-box3">
            <div style="width: 160px;height: 40px;background-color: rgb(12, 183, 251);border-radius: 20px;">
                <span style="color: white;font-size: 13px;">立即创建</span>
            </div>
        </div>
    </div>

    <div class="main-content">
        <h1 style="color: black;font-size: 40px;font-weight: 400;padding-top: 30px;">我们的服务</h1>
        <div style="width: 1200px;height: 0.1px;background-color: rgba(0, 0, 0, 0.207)"></div>
        <div class="main-toptext">
            <div class="main-toptext-items">
                <img src="image/3.1.png" alt="1" style="margin-bottom: 25px;">
                <br>
                <span style="font-size: 20px;display: inline-block; margin-bottom: 10px;">网页设计</span>
                <br>
                <span  style="font-size: 15px;">为客户设计网页效果及开发网站功能提供了便利的位置及面对面贴心服务。客户网站最终实现良好的用户浏览体验及良好的……</span>
            </div>
            <div class="main-toptext-items">
                <img src="image/3.2.png" alt="2" style="margin-bottom: 25px;">
                <br>
                <span style="font-size: 20px;display: inline-block; margin-bottom: 10px;">网页设计</span>
                <br>
                <span  style="font-size: 15px;">为客户设计网页效果及开发网站功能提供了便利的位置及面对面贴心服务。客户网站最终实现良好的用户浏览体验及良好的……</span>
            </div>
            <div class="main-toptext-items">
                <img src="image/3.3.png" alt="3" style="margin-bottom: 25px;">
                <br>
                <span style="font-size: 20px;display: inline-block; margin-bottom: 10px;">网页设计</span>
                <br>
                <span  style="font-size: 15px;">为客户设计网页效果及开发网站功能提供了便利的位置及面对面贴心服务。客户网站最终实现良好的用户浏览体验及良好的……</span>
            </div>
            <div class="main-toptext-items">
                <img src="image/3.4.png" alt="4" style="margin-bottom: 25px;">
                <br>
                <span style="font-size: 20px;display: inline-block; margin-bottom: 10px;">网页设计</span>
                <br>
                <span  style="font-size: 15px;">为客户设计网页效果及开发网站功能提供了便利的位置及面对面贴心服务。客户网站最终实现良好的用户浏览体验及良好的……</span>
            </div>
        </div>
        <div class="header-box3">
            <div style="width: 160px;height: 40px;background-color: rgb(12, 183, 251);border-radius: 20px;margin-bottom: 180px;">
                <span style="color: white;font-size: 13px;">了解更多</span>
            </div>
        </div>
        <div class="main-box1">
            <div class="main-leftbox">
                <h2>让您的网站脱颖而出</h2>
                    <p class="no-margin">目前，公司在北京朝阳区、海淀区和丰台区设置有三个运营中心，同一城市分设的运营中心是区别于其它网站建设公司的最大特色。</p>
                    <p class="no-margin">为客户设计网页效果及开发网站功能提供了便利的位置及面对面贴心服务。</p>
                    <p class="no-margin">基于此，客户网站最终实现良好的用户浏览体验及良好的搜索引擎体验成为现实。</p>
                <div class="header-box3">
                    <div style="width: 160px;height: 40px;background-color: rgb(12, 183, 251);border-radius: 20px;">
                        <span style="color: white;font-size: 13px;">了解更多</span>
                    </div>
                </div>
            </div>
            <div class="main-rightbox">
                <div class="screen"></div>
            </div>
        </div>
        <div class="main-box1">
            <div class="main-rightbox2">
                <div class="screen2"></div>
            </div>
            <div class="main-leftbox">
                <h2 style="color: white;">APP 高端定制</h2>
                    <p class="no-margin" style="color: white;">高效率，高质量，高性价比 app 制作公司。服务于千家不同行业客户。经过多年积累，陆续推出的电子商务、生活服务、智慧旅游、移动金融、远程医疗、掌上地产、移动酒店、电子政务、游戏娱乐、电子杂志等移动解决方案为各行业企业向移动互联网转型翻开了崭新一页。</p>
                    <p class="no-margin" style="color: white;">专注移动互联网,值得信赖的合作伙伴,app 开发开发，为您打造精品！</p>
                <div class="header-box3">
                <div style="width: 160px;height: 40px;background-color:white;border-radius: 20px;">
                    <span style="color: rgb(12, 183, 251);font-size: 13px;">了解更多</span>
                </div>
                </div>
            </div>          
        </div>
    </div>
    <div class="main-box2">
        <img src="image/4.png" alt="4" style="width: 495px;height: 380px;">
        <div class="main-leftbox">
            <h1 style="color: black;font-size: 50px;">倾听我们的声音</h1>
                <p class="no-margin" style="color: black;">用大屏轻松查看报表、文档、PPT,无需放大也能看的清。还能直接在手机上修改内容,效率倍增。</p>
            <div class="header-box3">
            <div style="width: 160px;height: 40px;background-color: rgb(12, 183, 251);border-radius: 20px;">
                <span style="color:white;font-size: 13px;">了解更多</span>
            </div>
            </div>
        </div>          
    </div>
    <div class="black-background">
        <div class="little-background" style="background-image: url(image/5.1.png);">
            <h1>大屏要有大电量</h1>
            <h1>4850mAh 超长续航</h1>
        </div>
        <div class="little-background" style="background-image: url(image/5.2.png);">
            <h1>高端性能的展现</h1>
            <h1>让你激动</h1>
        </div>
        <div class="little-background" style="background-image: url(image/5.3.png);">
            <h1>2 亿用户</h1>
            <h1>4850mAh 超长续航</h1>
        </div>
        <div class="little-background" style="background-image: url(image/5.4.png);">
            <h1>轻薄</h1>
            <h1>大屏黄金尺寸</h1>
        </div>
    </div>
    <!-- 标题和描述 -->
    <div class="team-header">
        <h2>我们的团队</h2>
        <p>专业的开发团队，十年的外包经验，拥有资深团队</p>
    </div>
    <div class="team-container">
        
        <!-- 团队成员卡片 1 -->
        <div class="team-card">
            <img src="image/6.1.png" alt="Johh Doe">
            <h3>Johh Doe</h3>
            <p>CEO</p>
            <div class="header-box3">
                <div style="width: 160px;height: 40px;background-color: rgb(12, 183, 251);border-radius: 20px;">
                    <span style="color: white;font-size: 13px;">了解更多</span>
                </div>
            </div>
        </div>
        <!-- 团队成员卡片 2 -->
        <div class="team-card">
            <img src="image/6.2.png" alt="Lika Dilop">
            <h3>Lika Dilop</h3>
            <p>CFO</p>
            <div class="header-box3">
                <div style="width: 160px;height: 40px;background-color: rgb(12, 183, 251);border-radius: 20px;">
                    <span style="color: white;font-size: 13px;">了解更多</span>
                </div>
            </div>
        </div>
        <!-- 团队成员卡片 3 -->
        <div class="team-card">
            <img src="image/6.3.png" alt="Mikey Jooh">
            <h3>Mikey Jooh</h3>
            <p>COO</p>
            <div class="header-box3">
                <div style="width: 160px;height: 40px;background-color: rgb(12, 183, 251);border-radius: 20px;">
                    <span style="color: white;font-size: 13px;">了解更多</span>
                </div>
            </div>
        </div>
        <!-- 团队成员卡片 4 -->
        <div class="team-card">
            <img src="image/6.4.png" alt="Vellen Kron">
            <h3>Vellen Kron</h3>
            <p>CTO</p>
            <div class="header-box3">
                <div style="width: 160px;height: 40px;background-color: rgb(12, 183, 251);border-radius: 20px;">
                    <span style="color: white;font-size: 13px;">了解更多</span>
                </div>
            </div>
  </div>
</div>
<div class="product-container">
    <h2 style="font-size: 50px;">马上体验最IN的产品</h2>
    <p style="font-size: 20px;">提供IOS开发,Android开发,HTML5开发等各类app开发服务,提供一站式解决方案</p>
    <div class="header-box3">
                <div style="width: 160px;height: 40px;background-color: rgb(12, 183, 251);border-radius: 20px;">
                    <span style="color: white;font-size: 13px;">立即创建</span>
                </div>
            </div>
</div>
<div class="contact-section">
    <div class="contact-leftsection">
        <h2 style="font-size: 50px;">与我们取得联系</h2>
        <span style="margin-bottom: 50px;font-size: 20px;">公司地址:北京市XX区知春路东华XX大厦 上地XX街XX号</span>
        <div>
            <span>Phone: </span><span style="color: rgb(12, 183, 251);">400-xxx-3838</span> 
        </div>
        <div>            
            <span>E-mail: <a style="color: rgb(12, 183, 251);">contact@gonssxxxxingzi.cn</a></span>     
        </div>                
    </div>
    <div class="contact-rightsection">
        <div class="form-group">
            <input type="email" placeholder="邮件地址" class="clear-input">
        </div>
        <div class="form-group">
            <textarea placeholder="给我们留言" class="clear-input" style="height: 200px;"></textarea>
        </div>
        <div class="header-box3" style="margin-left: 250px;">
                <div style="width: 160px;height: 40px;background-color: rgb(12, 183, 251);border-radius: 20px;">
                    <span style="color: white;font-size: 13px;">提交</span>
                </div>
            </div>
    </div>
    
</div>
<div class="footer-content">
    <div class="contact-item">
        <span>版权 @2014 版权所有公司</span>
    </div>
    <div class="contact-item">
        <span>使用 / 隐私政策条</span>
    </div>
    <div class="contact-item" style="margin-left: 200px;">
        <i class="fas fa-envelope"></i> <!-- 邮箱图标 -->
        <span>info@xxx.com</span>
    </div>
    <div class="contact-item">
        <i class="fas fa-phone"></i> <!-- 电话图标 -->
        <span>+91-11-sss-6369</span>
    </div>
    <div class="contact-item">
        <span>CanvasOnSkype</span>
    </div>
</div>


</body>
</html>